<template>
	<div class="nav" >
		<router-link to="/goods" class="nav-item">点餐
		<!-- <transition name="test"> -->
				<i class="line" @click="change"></i>
			<!-- </transition> -->
		</router-link>
		<router-link to="/commit" class="nav-item">评价
		<!-- <transition name="test"> -->
		  <i class="line"></i>
			<!-- </transition> -->
		</router-link>
		<router-link to="/seller" class="nav-item">商家
		  <!-- <transition name="test"> -->
		    <i class="line"></i>
		  	<!-- </transition> -->
		</router-link>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				show:false
			}
		},
		methods:{
			change(){
				
			}
		}
	}
</script>

<style scoped>
	.show{
		animation: name .3s ease-in-out;
	}
.nav {
  display: flex;
  width: 100%;
  line-height: 10.666667vw;
  border-bottom: 1px solid #e4e4e4;
  background: #fff;
  position: sticky;
  top: 0px;
  z-index: 10;
}

.nav .nav-item {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  text-decoration: none;
  color: #666;
  position: relative;
}

.nav .active {
  color: #333;
  font-weight: 700;
}
.nav .active .line {
  width: 30px;
  height: 0.533333vw;
  background: #2395ff;
  display: inline-block;
  position: absolute;
  left: 45%;
  bottom: 0;
  margin-left: -10px;
}
/* .test-enter,
.test-leave-to{
	transform: translateX(200px);
	opacity: 0;
} */

.test-enter-active,
.test-leave-active{
	
	/* transition: all 5s ease-in-out; */
	animation: name .3s ease-in-out;
}
@keyframes name{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(2);
	}
	100%{
		transform: scale(1);
	}
}
</style>
